<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
<!--    <meta http-equiv="refresh" content="3">-->
    <title>Title</title>
    <style>
        span{
            margin-top: 15px;
        }
    </style>
</head>
<body>
<p>文件数:[[${info.fileNumber}]]</p>
<span th:text="cpu"></span>
<div class="progress">
    <div id="system-info-cpu" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow = "20" aria-valuemin="0" aria-valuemax="100"
         style="min-width: 2em;" th:style="'width:'+${info.cpu}+'%'" th:text="${info.cpu}+'%'">
        2%
    </div>
</div>

<span th:text="'内容 总计:'+${info.memery.total}+'G 剩余:'+${info.memery.free}+'G'"></span>
<div class="progress">
    <div id="system-info-memery" class="progress-bar progress-bar-striped active" aria-valuenow = "50" aria-valuemin="0" aria-valuemax="100"
         style="min-width: 2em;" th:style="'width:'+${info.memery.percent}+'%'" th:text="${info.memery.percent}+'%'">
        2%
    </div>
</div>

<span th:text="'磁盘  总计:'+${info.space.total}+'G 剩余:'+${info.space.free}+'G'"></span>
<div class="progress">
    <div id="system-info-space" class="progress-bar progress-bar-striped active" aria-valuenow = "20" aria-valuemin="0" aria-valuemax="100"
         style="min-width: 2em;" th:style="'width:'+${info.space.percent}+'%'" th:text="${info.space.percent}+'%'">
        2%
    </div>
</div>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">

<script>



      setInterval(function (){
          $.ajax({
              type: "POST",
              url:"/admin/systemInfo_json",
              dataType: "JSON",
              success: function(result) {
                  console.log(result);
                  $("#system-info-memery").text(result.memery.percent);
                  $("#system-info-memery").css("width",result.memery.percent+'%')
                  $("#system-info-cpu").text(result.cpu);
                  $("#system-info-cpu").css("width",result.cpu+'%')
                  $("#system-info-space").text(result.space.percent);
                  $("#system-info-space").css("width",result.space.percent+'%');
              }
          });
      },2000)





//do something...








</script>

</body>
</html>